<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据源</title>

		<link rel="stylesheet" href="../../lib/element-ui/index.css">
		<link rel="stylesheet" href="./index.css">

	</head>
	<body>

		<div id="app">

			<div class="app-layer-left">
				<el-table :data="tableData" highlight-current-row style="width: 100%">
					<el-table-column type="index" width="50"></el-table-column>
					<el-table-column property="name" label="数据源名称" width="120"></el-table-column>
					<el-table-column property="product" label="数据库类型" width="100"></el-table-column>
					<el-table-column property="driver_class" label="驱动类名" width="160" show-overflow-tooltip></el-table-column>
					<el-table-column property="driver_url" label="数据源URL" width="360" show-overflow-tooltip></el-table-column>
					<el-table-column property="username" label="用户名" width="100"></el-table-column>
					<el-table-column property="mark" label="连接标识" width="120"></el-table-column>
					<el-table-column property="description" label="说明"></el-table-column>
					<el-table-column fixed="right" label="操作" width="100" align="center">
					  <template slot-scope="scope">
						<el-button type="text" size="small" @click="onEdit(scope.$index, scope.row)" >修改</el-button>
						<el-button type="text" size="small" @click="onDelete(scope.$index, scope.row)" >删除</el-button>
					  </template>
					</el-table-column>
				</el-table>
			</div>

			<div class="app-layer-right">
				<div><span>&#xe850;</span></div>
				<div>
					<el-form :model="formData.fields" :rules="formData.rules" ref="formData" label-width="100px" class="app-layer-right-form" status-icon>
						<el-form-item label="数据源名称" prop="name">
							<el-input v-model="formData.fields.name"></el-input>
						</el-form-item>
						<el-form-item label="数据库类型" prop="product">
							<el-select v-model="formData.fields.product" placeholder="请选择数据库类型" @change="onDBProductChang">
								<el-option label="MySQL" value="MYSQL"></el-option>
								<el-option label="MySQL6X" value="MYSQL6X"></el-option>
								<el-option label="Oracle" value="ORACLE"></el-option>
								<el-option label="SQL Server" value="SQLSERVER"></el-option>
								<el-option label="PostgreSQL" value="POSTGRESQL"></el-option>
								<el-option label="DB2" value="DB2"></el-option>
								<el-option label="DM" value="DM"></el-option>
								<el-option label="KingBase" value="KINGBASE"></el-option>
								<el-option label="Oscar" value="OSCAR"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="驱动类名" prop="driver_class">
							<el-input v-model="formData.fields.driver_class" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="数据源URL" prop="driver_url">
							<el-input v-model="formData.fields.driver_url" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="用户名" prop="username">
							<el-input v-model="formData.fields.username" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="password">
							<el-input v-model="formData.fields.password" type="password" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="连接标识" prop="mark">
							<el-input v-model="formData.fields.mark" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="说明">
							<el-input type="textarea" v-model="formData.fields.description"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="danger" icon="el-icon-cpu" @click="onTest" round>测试</el-button>
							<el-button type="primary" icon="el-icon-success" @click="onSave" round>保存</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</body>

	<script type="text/javascript" src="../../lib/vue.js"></script>
	<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
	<script type="text/javascript" src="../../lib/snail.common.js"></script>
	<script type="text/javascript" src="./index.js"></script>

</html>
